<template>
  <div class="box">
    <header class="ordersale-header">
      <router-link tag="span" :class="item.icon" :to="item.path" v-for="(item, index) of list" :key="index"></router-link>
      <span>退款售后</span>
    </header>
    <div class="ordersale-content">
      <mt-loadmore :top-method="loadTop"  ref="loadmore">
      <ul class="ordersale-content-ul">
        <li v-for="(ordersale, ordersaleindex)  of ordersalelist" :key="ordersaleindex">
            <p><span class="iconfont icon-icon1"><b>公牛世家旗舰店</b></span></p>
            <P>
                <span><img :src="ordersale.pimg"/></span>
                <span><b>{{ordersale.pdesc}}</b><b>数量: 1</b></span>
            </P>
            <p><span>申请售后</span></p>
        </li>
        <li>
            <p><span class="iconfont icon-icon1"><b>公牛世家旗舰店</b></span></p>
            <P>
                <span><img src="https://gw.alicdn.com/bao/uploaded/i3/3418189174/TB1dNBwc22H8KJjy1zkXXXr7pXa_!!0-item_pic.jpg"/></span>
                <span><b>帮你省下门票钱的现场乐感帮你省下门票钱的现场乐感帮你省下门票钱的现场乐感</b><b>数量: 1</b></span>
            </P>
            <p><span>申请售后</span></p>
        </li>
      </ul>
      </mt-loadmore>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import axios from 'axios'
import { Swipe, SwipeItem, Loadmore, Lazyload, Toast } from 'mint-ui'
Vue.use(Swipe, SwipeItem, Lazyload, Loadmore.name, Loadmore, Toast)
const ordersalelist = []
export default {
  data () {
    return {
      list: [
        {
          path: '/order',
          icon: 'iconfont icon-fanhui2'
        }
      ],
      ordersalelist: ordersalelist
    }
  },
  computed: {
  },
  created () {
    // axios.get('http://jx.xuzhixiang.top/ap/api/goods/goods-list.php?uid=12009', {
    //   params: {
    //   }
    // })
    //   .then((res) => {
    //     console.log(res.data.data)
    //     this.ordersalelist = res.data.data
    //     console.log(this.ordersalelist)
    //   })
    //   .catch(function (error) {
    //     console.log(error)
    //   })
  },
  methods: {
    loadTop () {
      this.$refs.loadmore.onTopLoaded()
      axios.get('http://jx.xuzhixiang.top/ap/api/goods/goods-list.php?uid=12009', {
        params: {
        }
      })
        .then((res) => {
          this.ordersalelist = res.data.data.slice(0, 20)
          console.log(this.ordersalelist)
          Toast('加载完成')
        })
        .catch(function (error) {
          console.log(error)
        })
    }
  }
}
</script>

<style lang="scss">
// 头部
.ordersale-header{
  width:3.75rem;
  height:0.42rem;
  line-height:0.42rem;
  background:#F9F9F9;
  text-align: center;
  span{
    &:nth-child(1){
     font-size:0.16rem;
     float:left;
     font-weight: 700;
     margin-left:0.15rem;
    };
    &:nth-child(2){
      display:block;
      font-size:0.14rem;
      float:left;
       margin-left:1.3rem;
    }
  }
}
// 商品展示部分
.ordersale-content{
  overflow-y:scroll;
  flex:1;
  background: #E7EAED;
  .ordersale-content-ul{
      width:3.75rem;
      flex:1;
      background:0;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      li{
        width:100%;
        height:3rem;
        box-sizing: border-box;
        margin-top:0.2rem;
        background:#fff;
        border-bottom:1px solid #ccc;
        p:nth-of-type(1){
          width:100%;
          height:0.6rem;
          box-sizing: border-box;
          border-bottom:1px solid #ccc;
          line-height:0.6rem;
          background:0;
          span{
            font-weight:300;
            display: block;
            margin-left: 0.2rem;
            color:#666666;
            font-size:0.24rem;
            b{
              padding-left:0.2rem;
              font-size:0.17rem;
            }
          }
        }
        p:nth-of-type(2){
          width:100%;
          height:1.7rem;
          background:0;
          display: flex;
          justify-content: space-between;
          span:nth-child(1){
            display: block;
            width:1.5rem;
            height:1.5rem;
            line-height:1.5rem;
            text-align: center;
            background:0;
            img{
              height:1rem;
              width:1rem;
            }
         }
          span:nth-child(2){
            display: block;
            width:2.25rem;
            height:1.5rem;
            background:0;
            b{
              display: block;
              font-weight: 300;
              width:100%;
              height:0.5rem;
              line-height:0.5rem;
              white-space: nowrap;
              font-size:0.18rem;
              overflow: hidden;
              text-overflow: ellipsis;
              &:nth-child(1){
                margin-top:0.1rem;
              }
              &:nth-child(2){
                font-size:0.16rem;
                color:#848484
              }
            }
          }
        }
        P:nth-of-type(3){
          width:100%;
          height: 0.7rem;
          line-height:0.7rem;
          background:0;
          span{
            display:block;
            width:1rem;
            float:right;
            margin-top:0.1rem;
            margin-right:0.1rem;
            height:0.4rem;
            line-height:0.4rem;
            text-align: center;
            border:1px solid red;
            border-radius: 0.25rem;
            color:red;
            font-size:0.16rem;
          }
        }
      }
    }
}
.slide-enter, .slide-leave-to {
  transform: translateX(100%);
}
.slide-enter-active {
  transition: all 1s;
}
.slide-enter-to, .slide-leave {
  transform: translateX(0%);
}
.slide-leave-active {
  transition: all 0s;
}
</style>
